<template>
  <view class="container">
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === '上架' }" @click="currentTab = '上架'">已上架</view>
      <view class="tab-item" :class="{ active: currentTab === '下架' }" @click="currentTab = '下架'">已下架</view>
    </view>
    <view v-if="currentTab === '上架'" class="house-list">
      <view class="house-item" v-for="(house, index) in onShelfStoreList" :key="index">
        <view class="house-img"></view>
        <view class="house-info">
          <view class="house-location">{{ house.storeName }} {{ house.storeDesc }}</view>
          <view class="house-price"> {{ house.storeAddressPath }}</view>
          <view class="house-statistics">
            <view>店长：{{ house.clerkName }} 联系方式：{{ house.clerkPhone }}</view>
            <view class="store-status"> 类型:{{ house.storeType }}  状态：{{ house.storeDisable }}</view>
          </view>
        </view>
        <view class="house-actions">
          <!-- 根据店铺状态显示不同的按钮 -->
          <button v-if="house.storeDisable === 'OPEN'" class="off-shelf-btn" style="background-color: #cc0000;" @click="offShelfHouse(house.id)">下 架</button>
          <button v-if="house.storeDisable === 'CLOSED'" class="off-shelf-btn" style="background-color: #4cd964;" @click="enableStore(house.id)">开 启</button>
          <button v-if="house.storeDisable === 'REFUSED'" class="off-shelf-btn" style="background-color: #4cd964;" @click="addHouse">重新申请</button>
          <button v-if="house.storeDisable === 'APPLYING'" class="off-shelf-btn" style="background-color: #007aff;" @click="applyingHouse(house.memberId)">审 核</button>
          <button class="off-shelf-btn" style="background-color: #007aff;" @click="checkHouse(house.id)">查 看</button>
        </view>
      </view>
    </view>
    <view v-if="currentTab === '下架'" class="house-list">
      <view class="house-item" v-for="(house, index) in offShelfStoreList" :key="index">
        <view class="house-img"></view>
        <view class="house-info">
          <view class="house-location">{{ house.storeName }} {{ house.storeDesc }}</view>
          <view class="house-price"> {{ house.storeAddressPath }}</view>
          <view class="house-statistics">
            <view>店长：{{ house.clerkName }} 联系方式：{{ house.clerkPhone }}</view>
            <view class="store-status"> 类型:{{ house.storeType }}  状态：{{ house.storeDisable }}</view>
          </view>
        </view>
        <view class="house-actions">
          <button v-if="house.storeDisable === 'CLOSED'" class="off-shelf-btn" style="background-color: #4cd964;" @click="enableStore(house.id)">开 启</button>
          <button v-if="house.storeDisable === 'REFUSED'" class="off-shelf-btn" style="background-color: #4cd964;" @click="addHouse">重新申请</button>
          <button v-if="house.storeDisable === 'APPLYING'" class="off-shelf-btn" style="background-color: #007aff;" @click="applyingHouse(house.memberId)">审 核</button>
          <button class="off-shelf-btn" style="background-color: #007aff;" @click="checkHouse(house.id)">查 看</button>
        </view>
      </view>
    </view>
<!--    <view class="add-icon" @click="addHouse">-->
<!--      <text>+</text>-->
<!--    </view>-->
  </view>
</template>

<script>
import { getStoreList, getStoreListAll, auditStore, disableStore, enableStore } from "@/api/store.js";
export default {
  data() {
    return {
      onShelfStoreList: [],
      offShelfStoreList: [],
      goodsParams: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
      },
      currentTab: "上架",
      houseList: [
        {
          location: "袁州区",
          projectName: "碧桂园龙悦台",
          price: 150,
          replyCount: 200,
          viewCount: 200,
          status: "OPEN" // 假设初始状态为开启中
        },
        {
          location: "袁州区",
          projectName: "碧桂园龙悦台",
          price: 150,
          replyCount: 200,
          viewCount: 200,
          status: "CLOSED" // 假设初始状态为关闭
        }
      ]
    };
  },
  onLoad() {
    this.getStoreList();
  },
  // 下拉加载
  onReachBottom() {
    this.goodsParams.pageNumber++;
    this.getStoreList();
  },
  methods: {
    /** 加载商品 */
    async getStoreList() {
      getStoreListAll().then(res => {
        if (res.data.code === 200) {
          this.onShelfStoreList = res.data.result.filter(house => house.storeDisable === 'OPEN');
          this.offShelfStoreList = res.data.result.filter(house => house.storeDisable != 'OPEN');
        }
        console.log(res);
      });
    },
    exposeHouse(house) {
      // 点击曝光逻辑，这里暂为空
    },
    enableStore(id){//开启
      enableStore(id).then(res => {
        if (res.data.code === 200) {
          uni.showToast({
            title: "开启成功",
            icon: "none",
          });
          this.getStoreList();
        }
      });
    },
    offShelfHouse(id) {
      disableStore(id).then(res => {
        if (res.data.code === 200) {
          uni.showToast({
            title: "下架成功",
            icon: "none",
          });
          this.getStoreList();
        }
        console.log(res);
      });
    },
    auditHouse(house) {
      auditStore(house.id, 0).then(res => {
        if (res.data.code === 200) {
          uni.showToast({
            title: "审核成功",
            icon: "none",
          });
          this.getStoreList();
        }
        console.log(res);
      });
    },
    checkHouse(id) {
      uni.navigateTo({
        url: "/pages/manage/sub/checkStore?id="+id
      });
    },
    addHouse() {
      uni.navigateTo({
        url: "/pages/manage/sub/addStore"
      });
      // 添加房源逻辑，这里暂为空
    },
    applyingHouse(memberId){
      uni.navigateTo({
        url: "/pages/manage/sub/addStore?memberId="+memberId
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.tab-bar {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.tab-item {
  padding: 10rpx 20rpx;
  color: #666;
}
.tab-item.active {
  color: #000;
  border-bottom: 2rpx solid #000;
}
.house-list {
  margin-top: 20rpx;
}
.house-item {
  display: flex;
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  padding: 10rpx;
}
.house-img {
  width: 30%; /* 调整为房屋项宽度的30% */
  height: auto; /* 高度自适应 */
  background-color: #f0f0f0;
  margin-right: 10rpx;
}
.house-info {
  flex: 1;
}
.house-location {
  font-size: 30rpx;
}
.house-price {
  font-size: 28rpx;
  color: #f60;
  margin-top: 5rpx;
}
.house-statistics {
  font-size: 26rpx;
  color: #999;
  margin-top: 5rpx;
}
.house-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 120rpx; /* 缩小按钮容器宽度 */
}
.off-shelf-btn {
  padding: 8rpx 16rpx;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  transition: background-color 0.3s ease;
}
.off-shelf-btn:hover {
  filter: brightness(0.9);
}
.add-icon {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  color: #f90;
}
.store-status {
  color: #f60;
  margin-top: 5rpx;
}
</style>